<template>
  <div class="TzwTable">
    <table cellspacing="0" align="center">
      <thead>
        <tr>
        <th style="width: 2rem; padding: 0.1rem; height: 2rem;">
        <input class="inputTT" type="checkbox" name="" id="" style="height: 1rem; width: 1rem; margin: 0.2rem; box-sizing: border-box;" @click="choose2Del(tableData)"></th>
        <th v-for="v in head" :style="{width: v.width}">{{ v.name }}</th>
      </tr>
      </thead>
      <tbody>
        <tr v-for="(v,i) in tableData">
            <td style="width: 2rem; padding: 0.1rem; height: 2rem;">
        <input type="checkbox" class="inputTT" name="" id="" style="height: 1rem; width: 1rem; margin: 0.2rem; box-sizing: border-box;" @click="choose2Del(v)"></td>
            <td v-for="(g,i,k) in v">{{ g }}
            <!-- <div style="display: inline-block;" v-if="!operation(g)">
            <button v-for="l in operation1(g)" style="border: none; background-color: white; color: #1abc9c; font-size: 1rem; width: 3rem; height: 1.2rem; padding: 0;">{{ l }}</button>
            </div> -->
            </td>
            <td>
                <slot :lv="v"></slot>
            </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { sliderProps } from "element-plus";
import { ref } from "vue";
defineProps({
    head:{
        type:Object,
        default:[]
    },
    tableData:{
        type:Object,
        default:[]
    }
})
let buttons=`<button></button><button></button><button></button>`
let operation=(g)=>{
    if(g.charAt(0)=='/'){
        g=''
    }
    return g
}
let operation1=(g)=>{
    g=g.slice(1)
    g=g.split('/')
    console.log(g);
    return g
    
}
let emit=defineEmits(["getChoose"])
let choose2Del=(y)=>{
    if(y.length){
        if(document.querySelectorAll('.inputTT')[0].checked==true){
            document.querySelectorAll('.inputTT').forEach((v,i)=>{
                v.checked=true
        })
        }else{
            document.querySelectorAll('.inputTT').forEach((v,i)=>{
                v.checked=false
        })
        y='null'
        }
    }
    document.querySelectorAll('.inputTT')[0].checked=true;
    document.querySelectorAll('.inputTT').forEach((v,i)=>{    
                if(i>0 && v.checked==false){
                    document.querySelectorAll('.inputTT')[0].checked=false;  
                }
        })
    emit("getChoose",y)
}
</script>

<style lang="less" scoped>
.TzwTable {
    table{
        border: rgb(231, 231, 231) 0.1rem solid;
        text-align: center;
        thead{
            tr{
                height: 2rem;
            th{
                font-size: 1.2rem;
                border: rgb(231, 231, 231) 0.1rem solid;
                margin: 0;
                font-weight: 400;
            }
        }
        }
        tbody{
            tr{
                height: 2rem;
            td{
                padding: 0;
                font-size: 1rem;
                border: rgb(231, 231, 231) 0.1rem solid;
                margin: 0;
            }
        }
    }
}
}
</style>
